<!DOCTYPE html>
<html>

<head>
    <base href="{{asset('statics')}}/" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>消费登记</title>
    <link href="weui/weui.min.css" rel="stylesheet" />
    <link href="weui/example.css" rel="stylesheet" />
</head>

<body>
    <div class="container js_container">
        <div class="page">
            <div class="weui_msg  button bd spacing" style="padding-top:8%;">
                <div class="weui_icon_area" style="margin-bottom:5%;"><img style="border-style: solid;border-width:5px;border-color: transparent;width:34%;" src="{{$avatar}}"></div>
                <div class="weui_text_area">
                    <h2 class="weui_msg_title">{{$nickname}}</h2>
                    @if($status)
                    <h2 id="weui_msg_title_z" class="weui_msg_title">剩余（{{$punch_num}}）次</h2>
                    @else
                    <h2 class="weui_msg_title" style="color: red;">无法登记/未开卡</h2>
                    @endif
                </div>
                @if($status)
                <!-- <div class="weui_opr_area">
                    <p class="weui_btn_area">
                        <a  class="weui_btn weui_btn_primary">登记</a>
                        <a  class="weui_btn weui_btn_primary">查询记录</a>
                    </p>
                </div> -->
                <div class="button_sp_area">
                <p class="weui_btn_area">
                    <a onclick="punch()" class="weui_btn  weui_btn_plain_primary">登记</a>
                    <a href="{{route('punch.card.list')}}" class="weui_btn  weui_btn_plain_primary">查询记录</a>

                    <a onclick="yuyue()"  class="weui_btn weui_btn_mini weui_btn_primary">预约</a>
                    <!-- <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> -->
                </p>
                </div>
                @endif
            </div>
        </div>


    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/mobile/layer.min.js"></script>

    <script>
        function punch() {
            //询问框
            layer.open({
                content: '您确定要登记？',
                btn: ['确定', '取消'],
                yes: function(index) {
                    $.post('{{route("punch.card")}}', {
                        _token: '{{csrf_token()}}'
                    }).done(function(res) {
                        if (res.code) {
                            $('#weui_msg_title_z').text('剩余（' + res.punch_num + '）次');
                        }
                        layer.open({
                            content: res.message,
                            btn: '知道了'
                        });
                    }).fail(function(res) {
                        layer.open({
                            content: '网络错误，请联系商家',
                            btn: '我知道了'
                        });
                    }).always(function(res) {
                        layer.close(index);
                    })

                }
            });
        }

        function yuyue() {
            //询问框
            layer.open({
                content: '您确定要预约吗？',
                btn: ['确定', '取消'],
                yes: function(index) {
                    $.get('{{route("punch.card.yuyue")}}').done(function(res) {
                        layer.open({
                            content: res.message,
                            btn: '知道了'
                        });
                    }).fail(function(res) {
                        layer.open({
                            content: '网络错误，请联系商家',
                            btn: '我知道了'
                        });
                    }).always(function(res) {
                        layer.close(index);
                    })

                }
            });
        }

        
    </script>
</body>

</html>